<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,height = device-height, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        .body {
            position: absolute;
            width: 100%;
            height: 100%;
        }

        .logo {
            position: absolute;
            top: 5px;
            left: 5px;
            width: 120px;
            height: 55px;
        }

        .zi {
            position: absolute;
            font-size: 22px;
            width: 100px;
            height: 100px;
            left: 125px;
            top: 15px;
        }

        .main {
            margin-top: 200px;
            width: 100%;
            height: 350px;
        }

        .main-1 {
            width: 800px;
            margin: auto;
            height: 300px;

        }

        .bottom {
            width: 100%;
            height: 200px;
        }

        .sjh {
            width: 600px;
            height: 50px;
        }

        .sjhm {
            float: left;
            width: 100px;
            height: 32px;
            text-align: center;
            font-size: 18px;
            padding-top: 5px;

        }

        .sjhk {
            float: left;
            width: 480px;
            height: 35px;
        }


        .select {
            border: 0;
            font-size: 22px;
            margin: auto;
        }

        .input1 {
            border: none;
            font-size: 20px;
            outline: none;
        }

        .sjhk-1 {
            float: left;
            width: 173px;
            height: 29px;
        }

        .sjhk-2 {
            float: left;
            width: 280px;
            height: 29px;
            color: #ababab;

        }

        .yzm {
            width: 600px;
            height: 50px;
        }

        .yzm-1 {
            margin-top: 5px;
            float: left;
            font-size: 18px;
            text-align: center;
            width: 80px;
            height: 32px;
            padding-left: 10px;
        }

        .yzmk {
            margin-left: 10px;
            outline: none;
            float: left;
            border: solid;
            width: 453px;
            height: 32px;

        }

        .hqyzm {
            float: right;
            margin-right: 10px;
            color: #ff4400;
            font-size: 18px;
            margin-top: 5px;
        }

        .tyxybzc {
            width: 450px;
            height: 35px;
            margin-left: 100px;
            background-image: url(btn.jpg);
            text-align: center;
            font-size: 18px;
            padding-top: 10px;
            color: white;
        }

        .xy {
            width: 450px;
            height: 50px;
            margin-left: 100px;
            margin-top: 20px;
            color: #ababab;

        }

        .qiehuan {
            color: #ff4400;
            margin-top: 80px;
            margin-right: 250px;
            text-align: right;
        }

        a {
            text-decoration: none;
        }

        .buttom-1 {
            margin: auto;
            width: 1050px;
            height: 35px;
            border: 1px solid #ababab;
            border-right: white;
            border-left: white;
        }

        .button1 {
            float: left;
            color: #6b6b6b;
            margin-right: 10px;
            font-size: 14px;
            margin-top: 5px;

        }

        .button2 {
            float: left;
            color: #6b6b6b;
            margin-right: 10px;
            font-size: 14px;
            margin-top: 5px;
        }

        .button3 {
            float: left;
            color: #6b6b6b;
            margin-right: 10px;
            font-size: 14px;
            margin-top: 5px;
        }

        .button4 {
            float: left;
            color: #6b6b6b;
            margin-right: 10px;
            margin-top: 5px;
            font-size: 14px;
        }

        .button5 {
            margin-right: 10px;
            font-size: 14px;
            margin-top: 5px;
            float: left;
            color: #6b6b6b;
        }

        .button6 {
            float: left;
            color: #6b6b6b;
            margin-top: 5px;
            margin-right: 10px;
            font-size: 14px;
        }

        .button7 {
            float: left;
            color: #6b6b6b;
            margin-top: 5px;
            margin-right: 10px;
            font-size: 14px;
        }

        .button8 {
            float: left;
            color: #6b6b6b;
            margin-right: 10px;
            margin-top: 5px;
            font-size: 14px;
        }

        .button9 {
            float: left;
            color: #6b6b6b;
            font-size: 14px;
            margin-top: 5px;
            margin-right: 10px;
        }

        .button10 {
            float: left;
            color: #6b6b6b;
            font-size: 14px;
            margin-top: 5px;
            margin-right: 10px;
        }

        .button11 {
            float: left;
            color: #6b6b6b;
            margin-top: 5px;
            margin-right: 10px;
            font-size: 14px;
        }

        .button12 {
            float: left;
            color: #6b6b6b;
            margin-right: 10px;
            margin-top: 5px;
            font-size: 14px;
        }

        .button13 {
            float: left;
            color: #6b6b6b;
            font-size: 14px;
            margin-top: 5px;
            margin-right: 10px;
        }

        .button14 {
            float: left;
            color: #6b6b6b;
            font-size: 14px;
            margin-top: 5px;
            margin-right: 10px;
        }

        .button15 {
            float: left;
            color: #6b6b6b;
            margin-top: 5px;
            font-size: 14px;
            margin-right: 10px;
        }

        .button16 {
            float: left;
            color: #6b6b6b;
            font-size: 14px;
            margin-right: 10px;
            margin-top: 5px;
        }

        .button17 {
            margin-right: 10px;
            margin-top: 5px;
            font-size: 14px;
            float: left;
            color: #6b6b6b;
        }

        .button18 {
            float: left;
            font-size: 14px;
            color: #6b6b6b;
            margin-top: 5px;
            margin-right: 10px;
        }

        .button19 {
            float: left;
            color: #6b6b6b;
            font-size: 14px;
            margin-top: 5px;
            margin-right: 10px;
        }

        .button20 {
            float: left;
            font-size: 14px;
            color: #6b6b6b;
            margin-top: 5px;
            margin-right: 10px;
        }

        .button21 {
            float: left;
            font-size: 14px;
            color: #6b6b6b;
            margin-top: 5px;
            margin-right: 10px;
        }

        .button22 {
            float: left;
            font-size: 14px;
            margin-top: 5px;
            color: #6b6b6b;
            margin-right: 10px;
        }

        .button23 {
            float: left;
            font-size: 14px;
            margin-top: 5px;
            color: #6b6b6b;
            margin-right: 10px;
        }

        .button24 {
            font-size: 14px;
            float: left;
            color: #6b6b6b;
            margin-top: 5px;
            margin-right: 10px;
        }

        .button25 {

            font-size: 14px;
            float: left;
            color: #6b6b6b;
            margin-top: 5px;
            margin-right: 10px;
        }

        .buttom-2 {
            width: 1050px;
            height: 50px;
            margin: auto;
            margin-top: 15px;
        }

        .buttom1 {
            float: left;
            width: 70px;
            height: 20x;
        }

        .buttom2 {
            float: left;
            width: 70px;
            height: 20x;
        }

        .buttom3 {
            float: left;
            width: 70px;
            height: 20x;
        }

        .buttom4 {
            float: left;
            width: 70px;
            height: 20x;
        }

        .buttom5 {
            float: left;
            width: 70px;
            height: 20x;
        }

        .buttom6 {
            float: left;
            width: 70px;
            height: 20x;
        }

        .buttom7 {
            float: left;
            width: 70px;
            height: 20x;
        }

        .buttom8 {
            float: left;
            width: 70px;
            height: 20x;
        }

        .buttom9 {
            float: left;
            width: 170px;
            height: 20x;
        }

        .buttom10 {
            float: left;
            width: 240px;
            height: 20x;
            color: #ababab;
        }

        .buttom-3 {
            height: 35px;
            width: 1050px;
            margin: auto;
            margin-top: 15px;

        }

        .btn1 {
            float: left;
            width: 150px;
            height: 35px;
            color: #ababab;
        }

        .btn2 {
            float: left;
            width: 150px;
            height: 35px;
        }

        .btn3 {
            float: left;
            width: 10px;
            height: 35px;
            color: #ababab;
        }

        .btn4 {
            float: left;
            width: 340px;
            height: 35px;
            color: #ababab;
        }

        .btn5 {
            float: left;
            width: 10px;
            height: 35px;
            color: #ababab;
        }

        .btn6 {
            float: left;
            width: 320px;
            height: 35px;
            color: #ababab;
        }

        .i {
            color: #656565
        }

        .i1 {
            color: #959595;
        }

        a:hover {
            color: #ff4400;
        }
    </style>
</head>

<body>
    <div class="body">
        <div class="nav">

            <div class="logo"><img src="logo.PNG"></div>
            <div class="zi">用户注册</div>
        </div>
        <div class="main">
            <div class="main-1">
                <div class="sjh">
                    <div class="sjhm">手机号码</div>
                    <div class="sjhk">
                        <div class="sjhk-1" style="border:1px solid #ababab;"> <select name="" id="" class="select">
                                <option value="">中国大陆&nbsp;&nbsp;+86</option>
                                <option value="">中国台湾&nbsp;&nbsp;+886</option>
                                <option value="">中国香港&nbsp;&nbsp;+852</option>
                            </select></div>

                        <div class="sjhk-2" style="border:1px solid #ababab;border-left:white;"><input type="text"
                                class="input1" id="a5" placeholder="请输入你的手机号" style="color:#ababab"></div>
                    </div>
                </div>
                <div class="yzm">
                    <div class="yzm-1">验证码</div>
                    <div class="yzmk" style="border:1px solid #ababab;"><input type="text" id="a4" placeholder="请输入校验码"
                            style="color:#ababab ;outline:none;border:0;font-size:20px;text-align: left;">
                        <div class="hqyzm"><a href="javascript:void(0);" style="color: #ff4400;" id="a6"
                                onclick=oc()>获取验证码</a>
                            <a href=""></a>
                        </div>
                    </div>
                </div>
                <div class="tyxybzc">同意协议并注册</div>
                <div class="xy">已阅读并同意以下协议<span style="color:#ff4400;" class="i"><a href="#"
                            style="color: #ff4400;">淘宝平台服务协议</a>、<a href="#" style="color: #ff4400;">隐私权协议</a>、
                        <a href="#" style="color: #ff4400;">法律声明</a>、<a href="#"
                            style="color: #ff4400;">支付宝及客户端服务协议</a></span></div>
                <div class="qiehuan"><a href="#" style="color: #ff4400;">切换成企业账户注册</a></div>

            </div>
        </div>
        <div class="button">
            <div class="buttom-1">
                <div class="button1"><a href=“#” class="i"> 阿里巴巴集团</a></div>
                <div class="button2">|</div>
                <div class="button3"><a href=“#” class="i">阿里巴巴国际站</a></div>
                <div class="button4">|</div>
                <div class="button5"><a href=“#” class="i">阿里巴巴中国站</a></div>
                <div class="button6">|</div>
                <div class="button7"><a href=“#” class="i">全球速卖通</a></div>
                <div class="button8">|</div>
                <div class="button9"><a href=“#” class="i">淘宝网</a></div>
                <div class="button10">|</div>
                <div class="button11"><a href=“#” class="i">天猫</a></div>
                <div class="button12">|</div>
                <div class="button13"><a href=“#” class="i">聚划算</a></div>
                <div class="button14">|</div>
                <div class="button15"><a href=“#” class="i">一淘</a></div>
                <div class="button16">|</div>
                <div class="button17"><a href=“#” class="i">阿里妈妈</a></div>
                <div class="button18">|</div>
                <div class="button19"><a href=“#” class="i">阿里云计算</a></div>
                <div class="button20">|</div>
                <div class="button21"><a href=“#” class="i">云OS</a></div>
                <div class="button22">|</div>
                <div class="button23"><a href=“#” class="i">万网</a></div>
                <div class="button24">|</div>
                <div class="button25"><a href=“#” class="i">支付宝</a></div>
            </div>
            <div class="buttom-2">
                <div class="buttom1"><a href=“#” class="i1">关于淘宝</a></div>
                <div class="buttom2"><a href=“#” class="i1">合作伙伴</a></div>
                <div class="buttom3"><a href=“#” class="i1">营销中心</a></div>
                <div class="buttom4"><a href=“#” class="i1">联系客服</a></div>
                <div class="buttom5"><a href=“# class="i1" ”>开放平台</a></div>
                <div class="buttom6"><a href=“#” class="i1">诚征英才</a></div>
                <div class="buttom7"><a href=“#” class="i1">联系我们</a></div>
                <div class="buttom8"><a href=“#” class="i1">网站地图</a></div>
                <div class="buttom9"><a href=“#” class="i1">法律声明及隐私权政策</a></div>
                <div class="buttom10">© 2021 Taobao.com 版权所有</div>
            </div>
            <div class="buttom-3">
                <div class="btn1">网络文化经营许可证:</div>
                <div class="btn2">文网文[2010]040号</div>
                <div class="btn3">|</div>
                <div class="btn4">增值电信业务经营许可证：&nbsp;浙B2-20080224-1</div>
                <div class="btn5">|</div>
                <div class="btn6">信息网络传播试听节目许可证：&nbsp;1109364号</div>

            </div>
        </div>

        <script>
            function oc() {
                var inpt = document.getElementById('a5').value
                if (inpt == '') {
                    alert("手机号不能为空")
                } else if (inpt.length != 11) {
                    alert('手机号格式不正确')
                } else if (inpt / 1 != inpt) {
                    alert('手机格式不正确')
                }else{
                    alert('验证码已发送')
                }

            }
        </script>

</body>

</html>